<template>
  <div class="home">
    <div class="top">
      <header class="header">
        <div class="img-box" @click.stop="changeSex">
          <svg
            v-if="sex == 1"
            xmlns="http://www.w3.org/2000/svg"
            xmlns:xlink="http://www.w3.org/1999/xlink"
            width="22px"
            height="20px"
          >
            <image
              x="0px"
              y="0px"
              width="22px"
              height="20px"
              xlink:href="data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAUCAMAAAC+oj0CAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAABO1BMVEX////j8P2z1/ufzPql0PrZ6/3T6P2CvflirPdOovYpjvQgivOgzfr6/f/q9P7O5v2DvvlKn/UojvSZyfr4+//Y6/272/uu1Puw1fvE4Pzn8v7o8/5hrPd8uvhQovbu9v5nr/djrPdrsfeNw/mGv/hhq/aZyfnN5P34+/6m0PpeqveBvPm83PzS6P2o0fpmrvcwkvSCvfjm8v7s9f6Mwvmx1vvP5vxcqfaXyPrr9P7S5/yLwvn8/f/f7v2Jwfl0tvfa6/2p0vrB3vyXyPnt9f5lrves0/ucy/rw9/5krfep0ft1tviFvvi+3fxpsPe32fuv1fu62vv3+/+Evvh7ufjW6f3v9/54uPhvs/i62/vk8f7c7P3c7f13t/hhq/eFv/iezPpbqfejzvrt9v50tvhaqPZgq/aHwPnN5f3eIQ3zAAAAAWJLR0QAiAUdSAAAAAd0SU1FB+cCEhQnFnJ7QXYAAAC7SURBVBjTY2AgGzAyMTMzs7CiC7Oxc3BycfOgC/Py8QsICgkjBERExcQlJKWkeWRk5RDC8kyyCjKKSsoqqmrqCnBhDU0tbR1WXT19A0MjYxNTmLCZuYUliLZSsDaysZWGCdvZO0AYjkpOSC7gcHaButDVDUnY3N0DwmD19EIS9vZhhDB8/fyRhANkAoNAtHFwSCiScFh4RGSUh3y0sFZAELKvY2Lj4hOEvROTklFDIywgJTUtPSOIgZoAAHPaGbI8BIO0AAAAAElFTkSuQmCC"
            />
          </svg>
          <svg
            v-else
            xmlns="http://www.w3.org/2000/svg"
            xmlns:xlink="http://www.w3.org/1999/xlink"
            width="21px"
            height="20px"
          >
            <image
              x="0px"
              y="0px"
              width="21px"
              height="20px"
              xlink:href="data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAAUCAMAAABVlYYBAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAABI1BMVEX/////+fj94d78ysT7v7j7wLr8z8r+6uf/+/v+8vH8yMH6qqH5oZf5npT5n5T6opj6r6b91tH/9/b8wbr5nJL7u7P+5eL/9vX929j6rKP6oZb91dH93Nj5mo/8yML/+Pf+8vD6raT6rqT+6eb6rqX7sqr+7Or6pJr8zMf5lYr8xsD/+vr7vLX5kob//Pv/+fn7urP5pJr+8fD+5+T6o5n8zMb7vrf6qaD939v94N3+6ef/+/r+6+n4joL919L//Pz+7ev8y8X5nZL8xL7/+Pj6p5391tL4jH/5oJb7u7T7tKz5mo795eL5jH74gHL7vbX+6uj8y8b5opj5kIP5kof92tX+9fT7r6b3e235i378ysX7rqT6ppz+6Ob7tKv8ycP93tppvbSNAAAAAWJLR0QAiAUdSAAAAAd0SU1FB+cCEhQtOSNFlKUAAAC0SURBVBjTY2AgAzAyMbOwsrFzoAhycnHz8PLxCwgKIasUFhEVYxSXkJSSRlItIysnD6IVFJWUEaIqqmpQaXUNhKimljaEIc6vgxDVldODMPT5DRCihgZGEIaxiRZC1JRHEGy3vJm5BVTI0sraxpbXjtNe28HRydkF5gBXNxZddw9PRzkvbzMjmHYfXV8//4DAoOAQyVBGuKFh4RGRgtboARNlG60bE4suGhcf5qOYQE5A4wYAXsUWZe/7W8wAAAAASUVORK5CYII="
            />
          </svg>
        </div>
        <div class="input-box" @click.stop="$router.push('/search')">
          <van-search v-model="kw" placeholder="请输入搜索关键词" />
        </div>
      </header>
      <section class="tags" title="标签">
        <div
          class="tag"
          :class="{ active: nowTag.id == tag.id }"
          v-for="(tag, index) in tags"
          :key="index"
          @click.stop="toThisView(tag)"
        >
          {{ tag.name }}
        </div>
      </section>
    </div>
    <keep-alive>
      <router-view :nowTag="nowTag" :isGetTags="isGetTags" />
    </keep-alive>
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
export default {
  name: "HomeView",
  data: () => {
    return {
      kw: "",
      tags: null,
      nowTag: null,
      isGetTags: 0,
    };
  },
  computed: {
    ...mapState({
      sex: (state) => state.sex,
      nowRouter: (state) => state.home.nowRouter,
      index: (state) => state.home.index,
    }),
  },
  watch: {
    sex(sex) {
      this.getTags(sex);
    },
  },
  methods: {
    ...mapMutations(["setSex"]),
    ...mapMutations("home", ["setNowRouter"]),
    changeSex() {
      let sex = this.sex == 1 ? 2 : 1;
      this.setSex({ sex });
    },
    toThisView(tag) {
      if (this.nowTag.id == tag.id) return;
      this.nowTag = tag;
      let to = "";
      let index = 0;
      switch (this.nowTag.name) {
        case "精选":
          to = "handpick";
          index = 0;
          this.$router.push({ name: "handpick" });
          break;
        case "免费":
          to = "free";
          index = 1;
          this.$router.push({ name: "free" });
          break;
        case "男生":
          to = "man";
          index = 2;
          this.$router.push({ name: "man" });
          break;
        case "女生":
          to = "girl";
          index = 3;
          this.$router.push({ name: "girl" });
          break;
        case "出版":
          to = "publish";
          index = 4;
          this.$router.push({ name: "publish" });
          break;
        case "听书":
          to = "listen";
          index = 5;
          this.$router.push({ name: "listen" });
          break;
      }
      this.setNowRouter({ nowRouter: to, index: index });
    },
    getTags(sex) {
      this.axios({
        method: "get",
        url: `${this.api.baseUrlData}/yunyuedu/store/navi.json?gender=${sex}`,
      }).then((res) => {
        this.tags = res.data.data.navi;
        this.nowTag = this.tags[this.index];
        this.isGetTags++;
        if (this.$route.path == `/home/${this.nowRouter}`) return;
        this.$router.push({ name: this.nowRouter });
      });
    },
  },
  created() {
    this.getTags(this.sex);
  },
};
</script>
<style lang="scss" scoped>
.home {
  width: 100%;
  .top {
    position: sticky;
    left: 0;
    top: 0;
    z-index: 1000;
    background-color: var(--text-white);
    .header {
      width: 100%;
      display: flex;
      align-items: center;
      box-sizing: border-box;
      padding: 0 0.15rem;
      .img-box {
        width: 0.25rem;
        min-width: 0.25rem;
        height: 0.25rem;
        image {
          width: 100%;
          height: 100%;
        }
      }
      .input-box {
        flex-grow: 1;
      }
    }
    .tags {
      width: 100%;
      height: 0.4rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .tag {
        position: relative;
        flex: 1;
        text-align: center;
        height: 100%;
        line-height: 0.4rem;
        transition: 0.3s;
        &::after {
          position: absolute;
          content: "";
          width: 50%;
          height: 0.04rem;
          left: 0;
          right: 0;
          bottom: 0.03rem;
          margin: 0 auto;
          background-color: transparent;
          border-radius: 0.02rem;
          transition: 0.3s;
        }
      }
      .active {
        color: var(--text-black);
        font-weight: bold;
        &::after {
          background-color: var(--bgc-red);
        }
      }
    }
  }
}
</style>
